<template>
  <div class="box">
    <aside-box>
      <template #zh> 折线图 </template>
      <template #en> line chart </template>
      <div class="line" ref="lineRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

const data = ref("");

// 自定义tooltip
function tooltipBox(params) {
  return `
  <div class="custom-tooltip">
    <div>
    ${params.marker} ${params.seriesName}
    </div>
    ${params.name}: ${params.value}
  </div>
`;
}

const option = {
  grid: {
    left: "10",
    top: "20",
    right: "30",
    bottom: "10",
    containLabel: true,
  },
  tooltip: {
    // formatter: "{a} <br/>{b} : {c} ({d}%)", // 指定tooltip渲染的内容
    backgroundColor: "rgba(0, 0, 0, 0.5)", // 修改tooltip背景颜色
    // borderColor: "#fff", // 修改tooltip背景边框颜色
    // 修改tooltip内部文字颜色
    // textStyle: {
    //   fontSize: 14,
    //   color: "#fff",
    // },
    // 通过模板字符串自定义tooltip结构内容
    formatter: (params) => {
      return tooltipBox(params);
    },
  },
  xAxis: {
    type: "category",
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
        width: 0, //这里是为了突出显示加上的
      },
    },
    axisLabel: {
      textStyle: {
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
      },
    },
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "#fff",
        width: 0, //这里是为了突出显示加上的
      },
    },
    axisLabel: {
      textStyle: {
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#fff",
        width: 0.5,
      },
    },
  },
  series: [
    {
      name: "销量",
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
      symbolSize: 8,
    },
  ],
};

// 实例化echarts
const [lineRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .line {
    width: 100%;
    height: 200px;
  }
}

:deep(.custom-tooltip) {
  color: #fff !important;
}
</style>